<template>
	<view>
		<u-navbar :is-back="false" 
		:background="{backgroundColor:'#74eaad'}"
		:border-bottom = "false"
		>
		<template #left>
			<view class="navbar-left" style="display: flex;" >
				<navigator class="set" url="/pages/set/set">
					<i class="iconfont icon-shezhi1"></i>
				</navigator>
				<view class="name"
				  :style="'zoom:'+forward+';opacity:'+forward" 
				>
					{{info.name}}
				</view>
			</view>
		</template>
		</u-navbar>
		<view id="q" @click="token? toSetInfo():toLogin()"
		  :style="'transform: translate(0,'+SCROLLTOP+'px);'"
		>
			<view id="q-top">
				<view style="width: 600rpx;">
					<text user-select id="q-name"
					:style="'zoom:'+downward*2"
					>
						{{info.name | lenghtFil(7)}}
					</text>
					<view :style="'opacity:'+downward">
						<u-icon name="edit-pen" color="#fff" size="28"></u-icon>
						<text style="margin-left: 10rpx;">编辑资料</text>
					</view>
				</view>
				<view :style="'opacity:'+downward">
					<u-image width="120rpx" height="120rpx"
					shape="circle"
					:src="info.ava"></u-image>
				</view>
			</view>
			<view id="card"
			
			>
				<view>
					一个小卡片
				</view>
			</view>
			<view id="q-menu">
			</view>
		</view>
		<view class="modelfa">
			<view id="w" class="model" ref="main">
				<view class="title">
					比赛
				</view>
				<imagetest
				:size="'33'"
				:datas="[
					{title:'待进行',to:'/pages/my/myCpttWaitFor',url:require('@/static/icons/等待.png')},
					{title:'已结束',to:'/pages/my/myCpttOver',url:require('@/static/icons/时间.png')},
					{title:'收藏',url:require('@/static/icons/收藏1.png')}
				]"
				></imagetest>
			</view>
			<view id="e" class="model">
				<view class="title">
					成就
				</view>
				<imagetest
				:size="'20'"
				:datas="[
					{title:'领取',url:require('@/static/icons/学士帽.png')},
					{title:'占位置',url:require('@/static/icons/空闲.png')},
					{title:'占位置',url:require('@/static/icons/空闲.png')},
					{title:'占位置',url:require('@/static/icons/空闲.png')},
					{title:'占位置',url:require('@/static/icons/空闲.png')},
					{title:'占位置',url:require('@/static/icons/空闲.png')},
					{title:'占位置',url:require('@/static/icons/空闲.png')},
				]"
				></imagetest>
				
			</view>
			<view id="r" class="model">
				<view class="title">
					其他
				</view>
				<imagetest
				:size="'25'"
				:datas="[
					{title:'调查问卷',url:require('@/static/icons/简历.png')},
					{title:'个人主页',url:require('@/static/icons/个人简历.png')},
          {title:'联系客服',url:require('@/static/icons/邮箱.png')},
					{title:'帮助反馈',url:require('@/static/icons/空闲.png')},
					{title:'占位置',url:require('@/static/icons/空闲.png')},
					{title:'占位置',url:require('@/static/icons/空闲.png')}
				]"
				></imagetest>
			</view>
		
			<!-- <u-line v-for="i in 100" margin="20rpx" /> -->
		</view>
		
	</view>
</template>

<script>
  import { mapGetters } from 'vuex'
	import imagetest from '../../components/imageText.vue'
	export default {
		data() {
			return {
				nameShow:false,
				// slideInfo:{
					forward:0, //随着滚动比例增大    0->1
					downward:1, //随着滚动比例减小    1->0
					SCROLLTOP:0, //页面滚动的距离
				// },
				OFFSET:0
			}
		},
		onLoad(){
			
		},
		onReady() {
			// #ifdef H5
			this.OFFSET = parseInt(document.getElementsByClassName('modelfa')[0].offsetTop-44)
			// #endif
			// #ifndef H5
				wx.createSelectorQuery().select(".modelfa").boundingClientRect((rect) => {
					this.OFFSET = parseInt(rect.top-44)
				}).exec()
			// #endif
			console.log(this.OFFSET)
		},
		watch:{
			SCROLLTOP(){
				// let result = 
				// if (result>1) result = 1;
				this.forward = (this.SCROLLTOP/this.OFFSET).toFixed(1)
				// console.log(this.forward)
			},
			forward(){
				this.downward = (1 - this.forward).toFixed(1)
				// console.log(this.downward)//48076
			}
		},
		onPageScroll(res){
			this.SCROLLTOP = res.scrollTop > this.OFFSET?
							 this.OFFSET:parseInt(res.scrollTop)
			
		},
		methods: {
			// FromTTop(){ //@touchmove="FromTTop"
				// const SCROLLTOP = document.documentElement.scrollTop //=>uni不生效
				// console.log(SCROLLTOP)
			// },
			toLogin(){
				console.log("to=>login")
				uni.navigateTo({
					url:'/pages/login/login',
					animationType: 'pop-in',
					animationDuration: 2000,
				})
			},
			toSetInfo(){
				uni.navigateTo({
					url:'/pages/setInfo/setInfo',
					animationType: 'pop-in',
					animationDuration: 2000,
				})
			}
		},
		components:{
			imagetest,
		},
		computed:{
      ...mapGetters(['info','token'])
		}
	}

</script>
<style>
	page{
		background: #74eaad;//translate()
	}
</style>
<style lang="scss" scoped>
.navbar-left{
	display: flex;
	align-items: center;
	width: 600rpx;
	.set{
		padding:0 40rpx;
		// transform: translate(50%,0%);
		.icon-shezhi1:before{
			zoom: 1.8;
			color: #FFF;
		}
	}
	.name{
		color: #fff;
		font-size: 20px;
	}
}
	.title{
		zoom: 1.2;
		font-weight: 700;
	}
	.modelfa{
		position: relative;
		z-index: 2;
		padding: 20rpx;
		background: #fafafa;
		.model{
			margin-bottom: 20rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			background: #fff;
		}
	}
	
	#q{
		height: auto;
		// background: #74eaad;
		padding: 20rpx 50rpx 0rpx 50rpx;
		#q-top{
			padding-bottom: 2vh;
			// width: 100%;
			display: flex;
			justify-content:space-between;
			align-items: center;
			text{
				color: #fff;
			}
			#q-name{
				// width: 90%;
				zoom: 2;
				font-family: "黑体";
				// white-space: nowrap;
				// overflow: hidden;
				// lines: 1;
				// text-overflow: ellipsis;
			}
		}
		#card{
			position: relative;
			z-index: 1;
			border-radius: 20rpx 20rpx 0px 0px;
			height: 8vh;
			// width: 100%;
			background: #000000;
			display: flex;
			view{
				margin: auto;
				color: #fff;
				zoom:1.5;
			}
		}
	}
	#w{
		// height: 300rpx;
		
	}
	#e{
		/deep/.hc-one:last-child{
			margin-right: 60%;
		}
	}
	#r{
		/deep/.hc-one:last-child{
			margin-right: 50%;
		}
		// /deep/.hc-one:nth-last-child(2){//+1-5
		// 	margin-right: 84%;
		// }
	}

</style>
